const empty=document.querySelector('.empty');
const h1=document.querySelector('h1');
let name;
document.addEventListener('dragstart',(e)=>{
    name=e.target.alt;
},false);
document.addEventListener('dragend',(e)=>{
    e.target.style.border='none';
},false);
empty.addEventListener('dragenter',(e)=>{
    if(empty.firstChild){
        empty.removeChild(empty.firstChild);
    }
    h1.innerHTML=name;

},false);
document.addEventListener('drag',(e)=>{
    e.target.style.border='5px dashed red';
    empty.style.border='5px dashed red';
},false);
document.addEventListener('dragend',(e)=>{
    e.target.style.border='none';
    empty.style.border='none';
    h1.innerHTML='请选择你的英雄';
},false);
empty.addEventListener('dragover',(e)=>{
    e.preventDefault();
},false);
empty.addEventListener('drop',(e)=>{
    e.preventDefault();
},false);
empty.addEventListener('dragleave',(e)=>{
    e.preventDefault();
})
empty.addEventListener('drop',(e)=>{
    e.target.appendChild(document.querySelector(`img[alt=${name}]`));
},false);